<template>
	<view class="login">
		<u-navbar bgColor="transparent" title="" :safeAreaInsetTop="true" :placeholder="true"
			leftIconColor="transparent">
		</u-navbar>
		<view style="display: flex;justify-content: center; padding: 50px 0;">
			<u--image src="../../static/loginLogo.png" width="110px" height="170px"></u--image>
		</view>
		<view class="loginFormBox pdBox">
			<view class="loginForm">
				<u--form labelPosition="left" :model="loginForm" :error-type="'toast'" labelWidth="auto" ref="formRef">
					<u-form-item label="" prop="username" borderBottom>
						<u--input prefixIcon="account" v-model="loginForm.username" placeholder="账号" clearable />
					</u-form-item>
					<u-form-item label="" prop="password" borderBottom>
						<u-input prefixIcon="lock"  v-model="loginForm.password" placeholder="密码"
							clearable :password="passwordShow">
							<template #suffix>
								<u-icon :name="!passwordShow?'eye-fill':'eye-off'" @click="passwordShow=!passwordShow"></u-icon>
							</template>
						</u-input>
					</u-form-item>
				</u--form>
				<view class="btns">
					<u-button type="primary" :throttleTime="1000" color="#74C3EA" shape="circle" @click="submit" :loading="loading"
						:loadingText="loadingText">登录</u-button>
				</view>
			</view>
		</view>
	</view>

</template>
<script lang="ts">
	import { userlogin } from '@/api/login/login.js'
	import { checkStation } from '@/api/station/station.js'
	import { defineComponent, reactive, toRefs, ref } from "vue";
	import { onReady, onShow } from "@dcloudio/uni-app";
	const LoginComponent = defineComponent({
		name: "LoginComponent",
		setup() {
			const data : any = reactive({
				checked: false,
				loginForm: {
					username: '',
					password: '',
					loginType: '1',
				},
				rules: {
					'username': {
						type: 'string',
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					},

					'password': {
						type: 'string',
						required: true,
						message: '请输入登录密码',
						trigger: ['blur', 'change']
					},
				},
				loading: false,
				passwordShow: true,
				loadingText: '加载中',
			});

			onShow(() => {
				const loginForm = uni.getStorageSync('loginForm');
				if (loginForm) {
					data.loginForm = { ...loginForm }
				}
			});
			const formRef = ref(null);
			onReady(() => {
				formRef.value.setRules(data.rules)
			});

			//登录
			const submit = () => {
				formRef.value.validate().then(res => {
					res && login()
				})
			};
			//登录接口
			const login = async () => {
				try {
					data.loading = true;
					const params = { ...data.loginForm }
					const res = await userlogin(params)
					data.loading = false;
					if (res.code != 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return;
					}
					uni.setStorageSync('access_token', 'Bearer ' + res.token);
					uni.setStorageSync('loginForm', data.loginForm);
					uni.setStorageSync('userInfo', res.user);
					uni.setStorageSync('dataOrgId', res.dataOrgId);//标识（成都、长沙）
	
					if (res.user.roles.length > 1) {
						uni.navigateTo({
							url: `/pages/station/station`
						})
					} else if (res.user.roles.length === 1) {
						uni.setStorageSync('role', res.user.roles[0].roleName)
						uni.setStorageSync('roleKey', res.user.roles[0].roleKey)
						if(res.user.roles[0].roleKey=='MobileAdmin'){
							uni.reLaunch({
								url: `/pages/manage/manage`
							})
						}else{
							uni.reLaunch({
								url: '/pages/planList/planList'
							})
						}
					
						
					}
				} catch (e) {
					data.loading = false;
					//TODO handle the exception
				}
			};


			return {
				...toRefs(data),
				submit,
				formRef,

			};
		}
	});
	export default LoginComponent;
</script>
<style lang="scss" scoped>
	.login {
		background: linear-gradient(180deg, #E2EDFD 0%, rgba(255, 255, 255, 0.75) 100%);
		min-height: 100vh;
		overflow: hidden;
	}

	.activeStation {
		margin-bottom: 45rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.u-grid-item {
		margin-bottom: 20rpx;
		align-items: flex-start;
	}

	.btns {
		margin-top: 40rpx;
	}
</style>